<template>
  <div>
    <div class="warp">
      <h1>Home</h1>
      <router-link to="/home/music/1/3min">中文歌</router-link>
      <router-link
        :to="{
          name: 'music',
          params: {
            id: 2,
            time: '4min',
          },
        }"
        >纯音乐</router-link
      >
      <router-link
        :to="{
          name: 'music',
          params: {
            id: 3,
            time: undefined,
          },
        }"
        >动漫歌曲</router-link
      >

      <router-link
        :to="{
          path: '/home/games/',
          query: {
            title: '恶魔城',
            version: '月下夜想曲',
          },
        }"
        >游戏1</router-link
      >
      <router-link to="/home/games/?title=黄金的太阳&version=失落的时代"
        >游戏2</router-link
      >
      <router-link to="/home/news">新闻</router-link>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style>
div.warp a {
  overflow: hidden;
  text-decoration: none;
  margin: 0 10px;
  width: 100px;
  height: 30px;
  display: inline-block;
  background-color: rgb(222, 246, 255);
  border-radius: 10px;
  text-align: center;
  border: 1px solid #3cf;
  line-height: 30px;
  font-weight: bold;
  color: #000;
}
div.warp a:hover {
  background-color: rgb(117, 176, 254);
   color: #fff;
}
div.warp a:active {
  font-size: 18px;
}
</style>
